<template>
    <div class="box">
        <!-- 顶部常驻logo -->
        <topLogo></topLogo>
        <div class="content">
            <!-- 条件搜索 -->
            <div class="content-top">
                <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f4f4f4"
                text-color="#000"
                active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">全部专业</template>
                    <el-menu-item :index="item" v-for="(item, index) in allMajor" :key="index">{{item}}</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">编辑推荐</template>
                    <el-menu-item :index="item" v-for="(item, index) in recommend" :key="index">{{item}}</el-menu-item>
                </el-submenu>
                </el-menu>
            </div>
            <!-- 主体内容 -->
            <div class="content-major">
                <div class="major-item" v-for="(item, index) in secondNavigation" :key="index">
                    <el-row class="major-items" type="flex"> 
                        <el-col :span="6" style="display:flex; align-items: center;justify-content: center;" >
                            <div class="major-item--left" @click="goDetail(item.navId)">
                                <div class="top-list-wrap">
                                    <div class="top-list-item">
                                        <a href="javascript::">
                                            <el-row type="flex" class="top-list-itembox">
                                                <el-col :span="12">
                                                    <div class="firstcter">
                                                        <el-avatar shape="circle" :size="50" fit="fit" src="../../src/assets/images/computer.jpg" style="width:130px;background: cornflowerblue;">{{item.navigation}}</el-avatar>
                                                        <div class="father-title">
                                                            <span class="top-title">{{item.navigation}}</span>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div class="thumbs-up">
                                                        <span class="bup">
                                                            <h4>{{item.star}}</h4>
                                                            <span>赞</span>
                                                        </span>
                                                        <span class="center-cut"></span>
                                                        <span class="bup">
                                                            <h4>{{item.contentCount}}</h4>
                                                            <span>评论</span>
                                                        </span>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12" style="display:flex; align-items: center; justify-content: space-around;">
                            <div class="major-item--middle">
                                <el-row>
                                    <ul>
                                        <el-col :span="7" v-for="(imgItem, imgIndex) in branchImg[index]" :key="imgIndex">
                                            <li>
                                                <a @click="goWorks(imgItem.navId, imgItem.depFirstId, imgItem.desId, imgItem.id)">
                                                    <img :src="imgItem.cover" alt="" class="search-icon">
                                                </a>
                                            </li>
                                        </el-col>
                                </ul>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col :span="6" style="display:flex; justify-content: space-between;">
                            <div class="major-item--right" @click="goDetail(item.navId)">
                                <el-row class="right">
                                    <el-col class="right-more" :span="24">
                                        <span>查看更多</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import topLogo from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
export default {
    components: {
        topLogo,
        Footer
    },
    data() {
        return {
            input2: "123",
            activeIndex: '1',
            recommend: ['最多评论','最多点赞'],
            secondNavigation: [],
            allMajor: [],
            activeKey: null,
            queryInfo: {
                page: 1,  // 页数
                size: 10000, // 条数
            },
            branchImg: []
        }
    },
    computed: {

    },
    watch: {
        activeKey(newItem, oldItem) {
            this.allMajor = []
            this.getSecondNavigation()
        }
    },
    mounted() {
        this.getSecondNavigation()
    },
    methods: {
      handleSelect(key, keyPath) {
          this.activeKey = key
          console.log(key, keyPath, 123);
      },
      goDetail(item) {
          console.log('这是他的navid' + item);
          this.$router.push({
              path: '/computer/branchdetail',
              query: {
                  firstId: this.$route.query.id,
                  secondId: item
              }
          })
      },
      // 获取二级部门的数据
      getSecondNavigation() {
          this.$http.get(this.$api.secondNavigation)
          .then((res) => {
              if(res.data.status === 20000) {
                  let branchId = this.$route.query.id
                  res.data.data.navigation.map((value, index) => {
                      if(value.navId === branchId) {
                        //   this.$store.commit('getFirst', value.navigation)  // 存入vuex
                          console.log(value.deps);
                           let tempCommentn = 0
                           let tempStar = 0
                          value.deps.map((currentValue, currentIndex) => {
                              this.allMajor.push(currentValue.navigation)
                            //   this.$store.commit('getSecond', currentValue.navigation)  // 存入vuex
                              if(this.activeKey === null) {
                                  this.secondNavigation.push(currentValue)
                              }else {
                                  // 条件搜索时用
                                  if(currentValue.navigation === this.activeKey) {
                                      this.secondNavigation = []
                                      this.branchImg = []
                                      this.getBranchWork(currentValue.navId)
                                      this.secondNavigation.push(currentValue)
                                  }else if(this.activeKey === '最多评论' && currentValue.contentCount > tempCommentn) {
                                      this.secondNavigation = []
                                      this.branchImg = []
                                      tempCommentn = currentValue.contentCount
                                      this.getBranchWork(currentValue.navId)
                                      this.secondNavigation.push(currentValue)
                                  }else if(this.activeKey === '最多点赞' && currentValue.star > tempStar) {
                                      this.secondNavigation = []
                                      this.branchImg = []
                                      tempStar = currentValue.star
                                      this.getBranchWork(currentValue.navId)
                                      this.secondNavigation.push(currentValue)
                                  }
                              }
                          })
                      }
                  })
              }
          })
          .then(res => {
              // 获取部门作品，需要回调执行
              this.getBranchWork()
            //   console.log(this.branchImg);
          })
          .catch((err) => {
              console.log(err);
          })
      },
      // 获取各部门的作品
      async getBranchWork() {
          for(let i = 0; i < this.secondNavigation.length; i++) {
              let value = this.secondNavigation[i]
              await this.$http.get(this.$api.branchList + value.navId, {params: this.queryInfo}) // 通过async await 将异步执行在此处暂停，回调执行完再继续执行接下来的
                .then((res) => {
                    if(res.data.status === 20000) {
                        // this.branchImg.push(res.data.data.records)
                        let tempRecords = []
                        res.data.data.records.map((item, index) => {
                            if(item.status === 1 && tempRecords.length < 3) {
                                tempRecords.push(item)
                            }
                        })
                        this.branchImg.push(tempRecords)
                        console.log(this.branchImg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
          }
      },
      // 进入作品
      goWorks(navId, depFirstId, desId, Id) {
          this.$router.push({
                path: '/computer/branchdetail/workdetail',
                query: {
                    firstId: navId,
                    secondId: depFirstId,
                    desId: desId,
                    workId: Id
                }
            })
      }
    }
}
</script>

<style lang="less" scoped>
.content {
    .content-top {
        background: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .content-major {
        .major-item {
            margin-top: 40px;
            .major-items {
                justify-content: center;
                .major-item--left {
                    .top-list-wrap {
                        display: flex;
                        // flex-direction: column;    
                        .top-list-item {
                            width: 100%;
                            a {
                                .top-list-itembox {
                                    display: flex;
                                    background: #ffff;
                                    align-items: center;
                                    padding: 20px 10px;
                                    flex-flow: column;  
                                    .firstcter {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        .father-title {
                                            display: inline-flex;
                                            flex-direction: column;
                                            // line-height: 39px;
                                            justify-content: space-around;
                                            color: #000000;
                                            .top-title {
                                                display: block;
                                                width: 35px;
                                            }
                                            .bottom-tittle {
                                                font-size: 10px;
                                            }
                                        }
                                    }
                                    .thumbs-up {
                                        display: flex;
                                        justify-content: space-evenly;
                                        .center-cut {
                                            width: 1px;
                                            // margin: 0 27px;
                                            background: #C8E3FF;
                                        }
                                        .bup {
                                            span {
                                                font-size: 10px;
                                                color: #000000;
                                            }
                                        }
                                        h4 {
                                            margin: 0;
                                            color: #1E90FF;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .major-item--middle {
                    padding: 20px 10px;
                    ul {
                        list-style: none;
                        display: flex;
                        justify-content: space-evenly;
                        li {
                            img {
                                width: 100%;
                                height: 100%;   
                            }
                        }
                    }
                }
                .major-item--right {
                    padding: 20px 10px;
                    .right {
                        height: 100%;
                        .right-more {
                            display: flex;
                            height: 100%;
                            align-items: center;
                            cursor: pointer;
                        }
                        .right-more:hover {
                            background: #f4f4f4;
                        }
                    }
                }
            }
        }
        .major-item:after {
            position: relative;
        top: 2px;
        left: 8px;
        content: "";
        width: 50%;
        height: 1px;
        background: #c2c2c2;
        display: inline-block;
        }
    }
}
.content-top /deep/ .el-menu.el-menu--horizontal {
    display: flex;
}
.content-top /deep/ .el-input--prefix .el-input__inner {
    border-radius: 20px;
}

</style>